<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header>
  <h1>数据可视化-Echarts</h1>
  <div class="showTime"></div>
</header>
<!--主体内容-->
<section class="mainbox">
  <!--左侧区域-->
  <div class="column">
    <div class="panel bar">
      <h2>就业行业</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line">
      <h2>人员变化</h2>
      <div class="switch">
        <a href="javascript:;">2020</a>
        <a href="javascript:;">2021</a>
      </div>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pie">
      <h2>年龄分布</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
  <!--中间区域-->
  <div class="column">
    <div class="no">
      <div class="no-hd">
        <ul>
          <li>167523</li>
          <li>105482</li>
        </ul>
      </div>
      <div class="no-bd">
        <ul>
          <li>前端需求人数</li>
          <li>市场供应人数</li>
        </ul>
      </div>
    </div>
    <div class="map">
      <div class="map1"></div>
      <div class="map2"></div>
      <div class="map3"></div>
      <div class="chart"></div>
    </div>
  </div>
  <!--右侧区域-->
  <div class="column">
    <div class="panel bar2">
      <h2>技能掌握</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line2">
      <h2>播放量</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel pie2">
      <h2>地区分布</h2>
      <div class="chart"></div>
      <div class="panel-footer"></div>
    </div>
  </div>
</section>

<script>
  var t = null;
  t = setTimeout(time, 1000); //開始运行
  function time() {
    clearTimeout(t); //清除定时器
    dt = new Date();
    var y = dt.getFullYear();
    var mt = dt.getMonth() + 1;
    var day = dt.getDate();
    var h = dt.getHours(); //获取时
    var m = dt.getMinutes(); //获取分
    var s = dt.getSeconds(); //获取秒
    document.querySelector(".showTime").innerHTML =
      "当前时间：" + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";
    t = setTimeout(time, 1000); //设定定时器，循环运行
  }
</script>

<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/china.js"></script>
<script src="js/index.js"></script>
</body>
</html>